<template>
    <div>
        <div><h3>主持人直播</h3></div>
        <div>
            <!-- 推流的视频展示 -->
            <div style="margin-top:30px; float: left; width:780px;">
              <div id="id_local_video" style="width:780px;height:450px;border:1px solid blue; float: left; margin: 10px;" ></div>
              <div style="margin: 20px;">
                  <el-button type="primary" @click="openCamera">打开摄像头</el-button>
                  <el-button type="primary" @click="closeCamera">关闭摄像头</el-button>
                  <el-button type="primary" @click="startScreenCapture">共享屏幕</el-button>
                  <el-button type="primary" @click="stopScreenCapture">关闭共享</el-button>
              </div>
              <div style="margin: 20px;">
                  <el-button type="primary" @click="startMicrophone">打开麦克风</el-button>
                  <el-button type="primary" @click="stopMicrophone">关闭麦克风</el-button>
                  <el-button type="primary" @click="startPush">开始直播</el-button>
                  <el-button type="primary" @click="stopPush">停止直播</el-button>
                  <el-button type="primary" @click="openUserList()">所有成员</el-button>
              </div>

            </div>
        </div>
    </div>
</template>

<script>
    import { getRoom } from '@/api/live/room.js'
    export default {
        name: 'PushVideoPage',
        props: {
          roomId: { type: [String,Number], default: 0 },
        },
        data() {
            return {
                livePusher: null,
                roomInfo: null,
            }
        },
        mounted() {
            console.log('roomId='+this.roomId);
            //--1 初始化腾讯云播放器
            this.readyPusher()
            
            //--2 获取房间信息
            
            getRoom(this.roomId).then(res => {
                console.log('getRoom', res);
                if(res.data.code == 200) {
                    this.roomInfo = res.data.data;
                }
            })
            
        },
        methods: {
            //初始化腾讯推流组件
            readyPusher(){
                this.livePusher = new TXLivePusher();
                // 指定本地视频播放器容器：
                this.livePusher.setRenderView('id_local_video');
                // 设置视频质量
                this.livePusher.setVideoQuality('720p');
                // 设置音频质量
                this.livePusher.setAudioQuality('standard');
                // 自定义设置帧率
                this.livePusher.setProperty('setVideoFPS', 25);
                console.log('readyPusher OK');
              //获取视频效果管理实例
              this.videoEffectManager = this.livePusher.getVideoEffectManager();
              //开启混流
              this.videoEffectManager.enableMixing(true);
              //设置混流参数
              this.videoEffectManager.setMixingConfig({
                videoWidth: 1280,
                videoHeight: 720,
                videoFramerate: 15
              });
            },
            openCamera() {
                // 打开摄像头
                this.livePusher.startCamera();
            },
            closeCamera() {
                // 关闭摄像头
                this.livePusher.stopCamera();
            },
            startScreenCapture() {
                // 打开共享桌面
                this.livePusher.startScreenCapture();
            },
            stopScreenCapture() {
                // 关闭共享桌面
                this.livePusher.stopScreenCapture();
            },
            startMicrophone() {
                // 打开麦克风
                this.livePusher.startMicrophone();
            },
            stopMicrophone() {
                // 关闭麦克风
                this.livePusher.stopMicrophone();
            },
            startPush() {
                // this.livePusher.startPush("webrtc://live.shenmazong.com/live/36301?txSecret=134321418f9cfc673c9bfc141c0ecf03&txTime=6309C85A");
                // this.livePusher.startPush("webrtc://live.shenmazong.com/live/32301?txSecret=ae4323ac78e0d0e6c7580674824286ba&txTime=6308BB23");
                this.livePusher.startPush(this.roomInfo.pushUrl)
            },
            stopPush() {
                // this.livePusher.stopPush("webrtc://live.shenmazong.com/live/32301?txSecret=ae4323ac78e0d0e6c7580674824286ba&txTime=6308BB23");
                this.livePusher.stopPush(this.roomInfo.pushUrl)
            },
        }
    }
</script>

<style>
</style>